<script setup>
import {ref} from "vue";
import {insertSignIn, insertTask} from "../../../../api/course/course.js";
import {ElMessage} from "element-plus";
import router from "../../../../router/index.js";
import {CameraFilled, LocationInformation, Ticket} from "@element-plus/icons-vue";
// 课程id
const courseId=ref();
courseId.value=localStorage.getItem('courseId');

const type=ref();

//签到类型
const types = ref([
  {
    value: '拍照签到',
    isChoose: true
  }, {
    value: '地址签到',
    isChoose: false
  }, {
    value: '签到码签到',
    isChoose: false
  }])

// 选择签到类型
const handleChooseType = (index) => {
  type.value=index;
  types.value.forEach((type, i) => {
    if (i === index) {
      type.isChoose = true
    } else {
      type.isChoose = false
    }
  })

}
// 表单数据
const task = ref({
  name: '',
  courseId:'',
  type: 0,
  startTime: '',
  endTime: ''
})
// 签到
const signIn =ref({
  taskId:'',
  type: 0,
  address: ''
})

// 添加任务
const handleInsertTask=async ()=>{
  for(let i=0;i<types.value.length;i++){
    if(types.value[i].isChoose){
      signIn.value.type=i;
    }
  }
  task.value.courseId=courseId.value;
  await insertTask(task.value).then(res=>{
        signIn.value.taskId=res.data;
        // 添加签到
        insertSignIn(signIn.value).then(()=>{
          ElMessage.success('添加签到成功');
          router.push(`/course/course/task`);
        });
  })
}

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background: #3a4357;height: 10vh">
        <div style="display: flex; align-items: center; height: 100%;">
          <!--        居中-->
          <span style="color: white;margin-left: 50%">新建签到</span>
        </div>
      </el-header>
      <el-main style="height: 90vh;display: flex; justify-content: center;">
        <el-card style="height: 80vh; width: 1100px;border-radius: 12px;">
          <div>
            <span style="margin-right: 20px">选择签到类型</span>
            <el-button v-for="(type,index) in types" style="border-radius: 14px;" :class="{'choose': type.isChoose}"
                       @click="handleChooseType(index)">{{ type.value }}
            </el-button>
          </div>
          <div style="display:flex;" >
            <div style="margin-top: 120px;margin-left: 150px">
              <el-form
                  :label-position="'top'"
                  label-width="auto"
                  :model="task"
                  style="width: 400px;"
              >
                <el-form-item label="签到备注">
                  <el-input placeholder="请输入签到备注" v-model="task.name" style="width: 320px;"/>
                </el-form-item>
                <div class="demo-time-range">
                  <el-form-item label="签到开始时间" style="margin-top: 40px">
                    <el-date-picker
                        v-model="task.startTime"
                        type="datetime"
                        placeholder="开始时间"
                        style="width: 320px;"
                    />
                  </el-form-item>
                  <el-form-item label="签到结束时间" style="margin-top: 40px">
                    <el-date-picker
                        v-model="task.endTime"
                        type="datetime"
                        placeholder="结束时间"
                        style="width: 320px;"
                    />
                  </el-form-item>
                </div>
              </el-form>
            </div>
            <div style="display: flex;margin-top: 60px">
              <div >
                <el-icon size="400px" v-if="type===0">
                  <CameraFilled />
                </el-icon>
                <el-icon size="400px" v-if="type===2">
                  <Ticket />
                </el-icon>
                <el-icon size="400px" v-if="type===1">
                  <LocationInformation />
                </el-icon>
              </div>
            </div>

          </div>
          <!--        靠右-->
          <el-button type="primary" style="margin-left: 50%;margin-top: 60px" @click="handleInsertTask">保存并发布</el-button>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.choose {
  background-color: #409eff;
  color: white
}
</style>